* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;
    position: absolute;
}

.w {
    width: 1200px;
    margin: 0 auto;
}

.top {
    background: #000;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 100%;
}

.orange {
    color: orange;
}

.img {
    float: left;
}

.box {
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
}

.ul li {
    list-style: none;
    float: left;
    line-height: 80px;
    padding: 0 30px;
    color: white;
}

.right {
    width: 140px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}

.right button {
    width: 120px;
    height: 40px;
    color: white;
    background: orange;
    outline: 0;
    border: 0;
    font-size: 18px;
}

.video {
    width: 100%;
}

.content {
    position: relative;
    flex: 1;
    .top {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid orange;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        .san {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: orange;
            margin-left: 10px;
        }
    }
    .contentbox {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .center {
        margin-top: 60px;
    }
}

.san {
    // margin-top: 50px;
    width: 100%;
    height: 100%;
    position: relative;
    background: #000 url('https://game.gtimg.cn/images/pubg/act/a20171114feature/bg_section1.jpg') 100%;
    .div {
        position: absolute;
        width: 300px;
        height: 300px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        h1 {
            font-size: 60px;
            color: white;
            font-style: italic;
        }
        h2 {
            text-align: right;
            font-size: 40px;
            font-style: italic;
            color: orange;
        }
        p {
            font-size: 10px;
            color: white;
            font-style: italic;
        }
    }
}

.si {
    width: 100%;
    height: 100%;
    margin-top: 50px;
    position: relative;
    background: #000 url('https://game.gtimg.cn/images/pubg/act/a20171114feature/bg_section2.jpg') 100%;
    .div {
        position: absolute;
        width: 300px;
        height: 300px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        h1 {
            font-size: 60px;
            color: white;
            font-style: italic;
        }
        h2 {
            text-align: right;
            font-size: 40px;
            font-style: italic;
            color: orange;
        }
        p {
            font-size: 10px;
            color: white;
            font-style: italic;
        }
        .city {
            width: 10px;
            height: 10px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            right: 190px;
            top: 228px;
        }
        .bw {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            box-shadow: 0 0 10px white;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            animation: bw 1s linear infinite;
        }
        @keyframes bw {
            0% {}
            60% {
                width: 30px;
                height: 30px;
                opacity: 1;
            }
            100% {
                width: 50px;
                height: 50px;
                opacity: 0;
            }
        }
        .bw2 {
            animation-delay: 0.4s;
        }
        .bw3 {
            animation-delay: 0.8s;
        }
    }
    .l {
        width: 600px;
        height: 800px;
        position: absolute;
        right: 0;
        top: 100px;
        transition: all 3s;
        opacity: 0;
    }
    .l .b,
    .l .t {
        width: 100%;
        height: 395px;
        p {
            width: 100%;
            text-align: center;
            height: 60px;
            span {
                width: 60px;
                height: 60px;
                display: inline-block;
                background: rgba(0, 0, 0, .2);
                img {
                    width: 100%;
                }
            }
        }
        p:nth-child(2) {
            width: 100%;
            height: 270px;
            img {
                width: 100%;
            }
        }
        p:nth-child(3) {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-between;
            span {
                width: 60px;
                height: 60px;
                display: inline-block;
                background: rgba(0, 0, 0, .2);
                // background-color: red;
                img {
                    width: 100%;
                }
            }
        }
    }
    .l .t {
        border-bottom: 2px dashed #ccc;
    }
}

.wu {
    width: 100%;
    height: 100%;
    margin-top: 50px;
    background: #000;
    position: relative;
    .div {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 99;
        .left {
            width: 200px;
            padding: 0 30px;
            z-index: 99;
            height: 150px;
            .p {
                text-align: center;
                line-height: 30px;
                margin-bottom: 15px;
            }
            p {
                color: white;
                font-size: 10px;
                span {
                    padding-bottom: 10px;
                    border-bottom: 1px solid white;
                }
            }
        }
        .right1 {
            flex-direction: column;
            padding: 0 30px;
            width: 200px;
            z-index: 99;
            height: 150px;
            .p {
                text-align: center;
                line-height: 30px;
                margin-bottom: 15px;
                span {
                    padding-bottom: 10px;
                    border-bottom: 1px solid white;
                }
            }
            p {
                color: white;
                font-size: 10px;
            }
        }
    }
    .h1 {
        position: absolute;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-style: italic;
        z-index: 999999;
    }
    .da,
    .xiao {
        width: 100%;
        display: flex;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        div {
            img {
                height: 100%;
            }
        }
    }
    .da {
        width: 100%;
        height: 100%;
        overflow: hidden;
        .left_yi {
            width: 33.3%;
            z-index: 1;
            background: url('https://game.gtimg.cn/images/pubg/act/a20171114feature/img_weather1.jpg');
        }
        .left_er {
            width: 33.3%;
            z-index: 2;
            background: url('https://game.gtimg.cn/images/pubg/act/a20171114feature/img_weather2.jpg');
        }
        .left_san {
            width: 33.3%;
            z-index: 3;
            background: url('https://game.gtimg.cn/images/pubg/act/a20171114feature/img_weather3.jpg');
        }
    }
    .xiao {
        opacity: 0;
        .right_yi {
            width: 20%;
            z-index: 1;
            background: url('https://game.gtimg.cn/images/pubg/act/a20171114feature/img_weather1.jpg');
        }
        .right_er {
            width: 20%;
            z-index: 2;
            background: url('https://game.gtimg.cn/images/pubg/act/a20171114feature/img_weather2.jpg');
        }
        .right_san {
            width: 20%;
            z-index: 3;
            background: url('https://game.gtimg.cn/images/pubg/act/a20171114feature/img_weather3.jpg');
        }
        .right_si {
            width: 20%;
            z-index: 4;
            background: url('https://game.gtimg.cn/images/pubg/act/a20171114feature/img_weather2.jpg');
        }
        .right_wu {
            width: 20%;
            z-index: 5;
            background: url('https://game.gtimg.cn/images/pubg/act/a20171114feature/img_weather1.jpg');
        }
    }
    .aaa {
        transition: all 1.3s;
    }
    .aa {
        transition: all 1.3s;
    }
}

.liu {
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
    .div {
        position: absolute;
        width: 300px;
        height: 300px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        h1 {
            font-size: 60px;
            color: white;
            font-style: italic;
        }
        h2 {
            text-align: right;
            font-size: 40px;
            font-style: italic;
            color: orange;
        }
        p {
            font-size: 10px;
            color: white;
            font-style: italic;
        }
    }
}

.qi {
    width: 100%;
    height: 90%;
    background: #000;
    position: relative;
    margin-top: 150px;
    .div {
        padding-top: 1px;
        width: 450px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 70px;
        transform: translate(-50%, -50%);
        div {
            display: flex;
            justify-content: space-around;
            align-items: center;
            h1 {
                font-size: 40px;
                color: white;
            }
            h2 {
                font-size: 40px;
                color: orange;
            }
        }
        >p {
            font-size: 12px;
            color: white;
        }
    }
}

.ba {
    width: 100%;
    height: 25%;
    background: #000;
    display: flex;
    margin-top: 20px;
    padding: 0 200px;
    .left {
        width: 281px;
        margin-right: 20px;
        img {
            width: 100%;
        }
    }
    .right {
        display: block;
        flex: 1;
        width: 100%;
        .p1 {
            line-height: 26px;
            color: white;
        }
    }
}